<template>
    <div class="common-detail-title">
        <span>{{title}}</span>
        <el-icon @click="backToParent" class="el-icon--left"><Back /></el-icon>
    </div>
</template>
<script setup lang="ts">
import {Back} from '@element-plus/icons-vue'
import router from "@/router"
    const props = defineProps({
        title: {
            type: String,
            default: "",
        },
        backPath: {
            type: String,
            default: "",
        }
    })
function backToParent(){
    router.push(props.backPath)
}
</script>
<style scoped lang="less">
    .common-detail-title{
        background: #fff;
        padding: 12px;
        font-size: 16px;
        line-height: 40px;
        display: flex;
        position: relative;
        .el-icon--left{
            cursor: pointer;
            font-size: 20px;
            margin: 10px 8px;
            &:hover{
                color: #409eff;
            }
        }
        &::before{
            content: '';
            position: absolute;
            width: 3px;
            height: 16px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #409eff;
        }
    }
</style>